<template>
    <div class="items">
        <div class="item" v-for="(item, index) in needinfos" :key="index">
            <div class="word">{{ item }}:</div>
            <a-date-picker  class="date" valueFormat="YYYY-MM-DD HH:mm:ss" @change="change" v-model:value="info[3]"
                v-if="index == 3" :disabled-time="disabledDateTime"
                :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }"/>
            <input type="text" v-model="info[index]" v-else>
        </div>
        <div class="btns">
            <router-link to="/">
                <a-button type="primary" danger class="btn">返回</a-button>
            </router-link>

            <a-button class="btn" @click="ok">确定</a-button>
        </div>
    </div>
</template>

<script setup>
import dayjs, { Dayjs } from 'dayjs';
import api from '@/api/user'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';

const router = useRouter();
const hasinfo = ref(0);
const info = ref([]);
const id = ref();
const range = (start, end) => {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
};
const disabledDateTime = () => {
  return {
    disabledHours: () => range(0, 24).splice(4, 20),
    disabledMinutes: () => range(30, 60),
    disabledSeconds: () => [55, 56],
  };
};
const change = () => {
    console.log(info.value);
}
const ok = () => {
    // Check if any field in info is empty
    if (info.value.length == 0 || info.value.some(field => field === undefined || field === "")) {
        message.info("表格不能为空");
        return;
    }

    let data = {
        "id": null,
        "name": info.value[0],
        "gender": info.value[1],
        "age": info.value[2],
        "diagnosisdate": info.value[3],
        "severity": info.value[4],
        "selectedrole": null,
        "selectiontime": null

    }

 
    if (hasinfo.value) {
        putinfo(data);
    } else {
        addinfo(data);
    }
    // Add your API call or further processing here
}
const putinfo = (data) => {
    data.id=id.value;
    console.log(data);
    api.putinfo(data).then((res) => {
        router.push('/')
        console.log(res);
    })
}
const addinfo = (data) => {
  
    
    api.addinfo(data).then((res) => {
        router.push('/')
        console.log(res);
    })
}
onMounted(() => {
    api.getinfo().then((res) => {
        console.log(res.rows[0]);
        id.value=res.rows[0].id;
        info.value[0]=res.rows[0].name;
        info.value[1]=res.rows[0].gender;
        info.value[2]=res.rows[0].age;
        info.value[3]=res.rows[0].diagnosisdate;
        info.value[4]=res.rows[0].severity;
        if (res.msg == "未绑定账号") {
            hasinfo.value = 0;
        }else{
            hasinfo.value = 1
        }
    })
})

const needinfos = ref(["姓名", "性别(男为1女为0)", "年龄", "确诊自闭症日期", "自闭症确诊程度"]);
</script>

<style lang="scss" scoped>
.items {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-image: url('@/static/back.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    gap: 2rem;
    overflow: hidden;
    overflow-y: auto;
    padding: 3rem;

    .item {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3rem;
        gap: 2rem;

        .word {
            border: #fb5e2f solid 1rem;
            border-radius: 2rem;
            color: #fc6845;
            background-color: #fee2b3;
            padding: 0 3rem 0 3rem;
        }

        input {
            border-radius: 2rem;
            padding-left: 1rem;
            height: 7rem;
            font-size: 4rem;
        }

        .date {
            height: 7rem;
            width: 40rem;
            font-size: 4rem !important;
        }
    }

    .btns {
        font-size: 3rem;
        display: flex;
        gap: 3rem;
        justify-content: center;

        .btn {
            font-size: 3rem;
            min-height: 6rem;
        }
    }
}
</style>